<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件拆分</title>
</head>
<script src="https://unpkg.com/vue@next"></script>
<body>
    <div id="root"></div>
    
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                inputValue:'',
                list:[]
            }
        },
        methods: {
            handlerClick() {
                this.list.push(this.inputValue);
                this.inputValue = ''
            }
        },
        template :`
        <div>
            <input v-model="inputValue"/>
            <button v-on:click="handlerClick">添加</button>
            <ul>
                <todo-item v-for="(item,index) of list" 
                v-bind:content="item"
                v-bind:index="index"
                />
            </ul>
        </div>
        `
    });

    app.component('todo-item', {
        props:['content', 'index'],
        template:`
            <div>{{content}}</div>
        `
    })

    app.mount('#root');
</script>
</html>


<!-- 
    
根组件 template
子组件 template 

组件传值  props  需要使用v-bind 绑定


-->